﻿@page "/navs"
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
@inject IStringLocalizer<Navs> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
    <Nav Items="@Items">
        <a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Align">
    <Nav Items="@Items" Alignment="Alignment.Center">
        <a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
    <Divider Text="@Localizer["Divider"]" />
    <Nav Items="@Items" Alignment="Alignment.Right">
        <a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="Vertical">
    <Nav Items="@Items" IsVertical="true">
        <a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
    <Divider Text="@Localizer["Divider"]" />
    <Nav Items="@Items" IsVertical="true" Alignment="Alignment.Right">
        <a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="Pills">
    <Nav Items="@Items" IsPills="true">
        <a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="FillAndAlign">
    <Nav Items="@Items" IsPills="true" IsFill="true">
        <a class="nav-link nav-item active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link nav-item" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link nav-item" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link nav-item disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
</DemoBlock>

<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="Wide">
    <Nav Items="@Items" IsPills="true" IsFill="true" IsJustified="true">
        <a class="nav-link nav-item active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link nav-item" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link nav-item" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link nav-item disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
